<template>
	<u-popup :show="show" @close="hide" closeOnClickOverlay :safeAreaInsetBottom="false">
		<view class="material-operater padding flex-column">
			<view class="material__name f-main m-b20 twoline-hide">{{material.name}}</view>
			<view class="material__actions flex-box">
				<action shadow icon="trash-fill" text="删除" @click="onDel"></action>
				<action shadow type="success" icon="eye-fill" text="预览" @click="onView"></action>
				<action shadow type="success" icon="share-square" text="打开文档" @click="onOpen"></action>
				<action shadow type="error" icon="photo" text="保存到相册" @click="onSave"></action>
			</view>
			<view class="material__close f-28" @click="hide">取消</view>
		</view>
    <MaterialDownloader :showProgress="showProgress" :file="file"/>
	</u-popup>
</template>

<script>
	import Download from './download.js'
	import MaterialDownloader from './downloader.vue'
	export default {
		name: 'material-operater',
		mixins: [Download],
		components: {
			MaterialDownloader
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			material: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				show: false,
			}
		},
		watch: {
			visible: function() {
				this.show = this.visible;
			},
		},
		methods: {
			hide: function() {
				this.show = false;
				this.$emit('update:visible', false)
			},
			onDel: function(e) {
				this.$emit('material:operate', {
					type: 'del',
					material: this.material
				});
				this.hide();
			},
			onView: function() {
				this.$emit('material:operate', {
					type: 'view',
					material: this.material
				});
				this.hide();
			},
			onOpen: function() {
				this.$emit('material:operate', {
					type: 'open',
					material: this.material
				});
				//this.hide();
				// 打开文档
				this.openFile();
			},
			onSave: function() {
				this.$emit('material:operate', {
					type: 'save',
					material: this.material
				});
				//this.hide();
				// 保存文件
				this.saveFile();
			},
			onDownload: function() {
				this.$emit('material:operate', {
					type: 'download',
					material: this.material
				});
				this.hide();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.material-operater {
		height: 500rpx;

		.material__name {
			padding: 26rpx 0;
			border-bottom: 1rpx solid #eee;
		}

		.material__close {
			border-top: 1rpx solid #eee;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
		}
	}
</style>
